<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%--
  Created by IntelliJ IDEA.
  User: qupen
  Date: 2016/11/26
  Time: 11:20
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<jsp:include page="../../include/head.jsp">
    <jsp:param name="title" value="故障原因列表"/>
</jsp:include>

<jsp:include page="../../include/tenant_header.jsp"/>

<jsp:include page="../../include/tenant_sidebar.jsp"/>
<div class="content-wrapper content-wrapper-bg">
    <section class="content-header">
        <h4 class="page-title" style="display: inline-block"><spring:message code="label.tenant.fault.reason.list"/></h4>

        <div class="form-group has-success has-feedback" style="float: right;margin-right: 40px;">
            <input type="text" placeholder="<spring:message code="label.admin.search"/>" class="form-control" id="inputSuccess2"
                   style="border-radius:5px;border-color:#aabfcb">
            <span class="glyphicon glyphicon-search form-control-feedback"></span>
        </div>
    </section>
    <section class="content">
        <div class="box box-primary table-header-line">
            <div class="box-body" style="padding: 0">
                <table class="table" id="repair_list">
                    <thead>
                    <tr>
                        <th></th>
                        <th><spring:message code="label.device.id"/></th>
                        <th><spring:message code="label.start.time"/></th>
                        <th><spring:message code="label.end.time"/></th>
                        <th><spring:message code="label.tenant.children.state"/></th>
                        <th><spring:message code="label.tenant.fault.reason"/></th>
                        <th><spring:message code="label.tenant.repair.personnel"/></th>
                        <th class="hidden"><spring:message code="label.tenant.faultRepair.start.time"/></th>
                        <th class="hidden"><spring:message code="label.tenant.faultRepair.end.time"/></th>
                    </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
        <%--</div>--%>
    </section>
</div>
<jsp:include page="../../include/foot.jsp"/>

<script>
    $(function () {
        var table = $('#repair_list').DataTable({
            "dom": '<"datatable-header"<"dataTables_filter">l><"datatable-scroll"t><"datatable-footer dataTable-footer-padding"<"pull-left"i><"pull-right"p>>',
            paging: true,
            lengthChange: false,
            ordering: true,
            autoWidth: true,
            info: true,
            serverSide: true,
            fixedHeader: true,
            searching: true,
            aLengthMenu: [15],
            columnDefs:[
                {
                    targets:[7],
                    visible:false,
                    searchable:false
                },
                {
                    targets:[8],
                    visible:false,
                    searchable:false
                }
            ],
            ajax: {
//                url: '/partner/{tenant}/api/v1/faultReason/list'.replace("{tenant}", getKeyByUrl()),
                url: '/partner/{tenant}/api/v1/faultReasonsByDataTable'.replace("{tenant}", getKeyByUrl()),
                dataSrc: 'data'
            },
            columns: [
                {
                    "className": 'details-control',
                    "orderable": false,
                    "data": null,
                    "defaultContent": ''
                },
                {
                    data:'device_unique_id',
                    "render": function (data, type, full, meta) {
                        if(full.repair_info==null||full.repair_info==""){
                            return '<a href="javascript:;" onclick="changeUrl(\''+ full.device_id + '\',\''+ new Date(full.start_time).formatXl() + '\',\''+ new Date(full.start_time).formatXl() + '\')">'+data+'</a>';
                        }else {
                            return data;
                        }
                    }
                },
                {
                    data: 'start_time',
                    "render": function (data, type, full, meta) {
                        var time = new Date(data);
                        return time.formatXl();
                    }
                },
                {
                    data: 'end_time',
                    "render": function (data, type, full, meta) {
                        var time = new Date(data);
                        return time.formatXl();
                    }
                },
                {
                    data: 'repair_info',
                    "render": function (data, type, full, meta) {
                        if (data == null || data == "") {
                            return '<spring:message code="label.tenant.no.repair"/>';
                        } else {
                            return '<spring:message code="label.tenant.have.repair"/>';
                        }
                    }
                },
                {
                    data: 'meta_definition',
                    "render": function (data, type, full, meta) {
                        var json = JSON.parse(data);
                        return json.FaultTypeReason;
                    }
                },
                {
                    data: 'repair_info',
                    "render": function (data, type, full, meta) {
                        if (data == null || data == "") {
                            return "";
                        } else {
                            var json =JSON.parse(data);
                            return json.maintainUser;
                        }
                    }
                },{
                    data: 'repair_start_time',
                },{
                    data: 'repair_end_time',
                }
            ],
            "language": {url: '/lang/datatable.chs.json'}
        });
        $('#inputSuccess2').bind('keyup', function (e) {
            table.search(this.value).draw();
        });

        // Add event listener for opening and closing details
        $('#repair_list tbody').on('click', 'td.details-control', function () {
            var tr = $(this).closest('tr');
            var row = table.row(tr);

            if (row.child.isShown()) {
                // This row is already open - close it
                row.child.hide();
                tr.removeClass('shown');
            }
            else {
                // Open this row
                row.child(format(row.data())).show();
                tr.addClass('shown');
            }
        });
    });

    function format(d) {
        // `d` is the original data object for the row
        if(d.repair_start_time != null && d.repair_end_time != null){
            return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">' +
                    '<tr>' +
                    '<td><spring:message code="label.tenant.faultRepair.time"/>:</td>' +
                    '<td>' + d.repair_start_time+"~"+d.repair_end_time + '</td>' +
                    '</tr>' +
                    '</table>';
        }else {
            return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">' +
                    '<tr>' +
                    '<td><spring:message code="label.tenant.faultRepair.time"/>:</td>' +
                    '<td>' + '<spring:message code="label.tenant.no.repair"/>' + '</td>' +
                    '</tr>' +
                    '</table>';
        }
    }

    function changeUrl(deviceId,startTime,endTime){
       window.location.href=("/partner/{tenant}/maintain/info?deviceId="+deviceId+"&startTime="+startTime+"&endTime="+endTime).replace("{tenant}",getKeyByUrl());
    }
</script>